<template>
  <div class="chart" ref="rightCenterChart"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { getRightCenterData } from '@/api/data-screen/right-charts';

onMounted(() => {
  getChartData()
})

let data1 = ref([])
let data0 = ref([])
async function getChartData() {
  try {
    // 并行请求优化
    const [res1, res0] = await Promise.all([
      getRightCenterData(1),
      getRightCenterData(0)
    ])
    console.log(res1)

    // 正确赋值响应式变量
    data1.value = formattingData(res1.data)
    data0.value = formattingData(res0.data)

    // 确保数据就绪后初始化图表
    initRightCenterChart()

  } catch (error) {
    console.error('数据获取失败:', error)
    // 可添加重试逻辑
  }
}

// 格式化后端返回的数据
function formattingData(originalData: any[] | null | undefined) {
  if (!originalData || !Array.isArray(originalData)) {
    console.error('数据格式错误：预期为数组');
    return [];
  }

  return originalData
    .filter(item => {
      if (item == null) {
        // console.warn('发现空数据项');
        return false;
      }
      const height = Number(item.height);
      const weight = Number(item.weight);
      if (isNaN(height) || isNaN(weight)) {
        console.warn('无效数据项:', item);
        return false;
      }
      return true;
    })
    .map(item => [Number(item.height), Number(item.weight)]);
}

// 获取根元素字体大小
const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);

// 定义一个函数，将 rem 转换为像素值
function remToPx(rem) {
  return rem * rootFontSize;
}


//右中散点图
const rightCenterChart = ref<HTMLElement | null>(null);
let rightCenterChartInstance: echarts.ECharts | null = null;
const initRightCenterChart = () => {
  if (rightCenterChart.value) {
    rightCenterChartInstance = echarts.init(rightCenterChart.value);
    updateRightCenterChart();
  }
}
const updateRightCenterChart = () => {

  try {
    type EChartsOption = echarts.EChartsOption;
    var option: EChartsOption;

    option = {
      color: ['#FF69B4', '#00BFFF'],
      grid: {
        top: '10%',
        left: '0',
        right: '6.8%',
        bottom: '20%',
        containLabel: true
      },
      textStyle: {
        fontSize: remToPx(0.8),
        color: '#ccc'
      },
      tooltip: {
        // trigger: 'axis',
        showDelay: 0,
        //图标单位
        formatter: function (params: any) {
          if (params.value.length > 1) {
            return (
              params.seriesName +
              ' :<br/>' +
              params.value[0] +
              'cm ' +
              params.value[1] +
              'kg '
            );
          } else {
            return (
              params.seriesName +
              ' :<br/>' +
              params.name +
              ' : ' +
              params.value +
              'kg '
            );
          }
        },
        axisPointer: {
          show: true,
          type: 'cross',
          lineStyle: {
            type: 'dashed',
            width: 1,
            color: '#ccc'
          }
        }
      },
      //图例
      legend: {
        data: ['女', '男'],
        left: 'center',
        bottom: remToPx(2),
        textStyle: {
          color: '#ccc',
          fontSize: remToPx(0.9)
        }
      },
      xAxis: [
        {
          type: 'value',
          scale: true,
          axisLabel: {
            formatter: '{value} cm'
          },
          splitLine: {
            show: false
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          scale: true,
          axisLabel: {
            formatter: '{value} kg'
          },
          splitLine: {
            show: false
          }
        }
      ],
      series: [
        {
          name: '女',
          type: 'scatter',
          symbolSize: remToPx(0.25),//散点大小
          emphasis: {
            focus: 'series'
          },
          // prettier-ignore
          data: data0.value,
          markArea: {
            silent: true,
            itemStyle: {
              color: 'transparent',
              borderWidth: 1,
              borderType: 'dashed'
            },
          },
          //最大值标
          markPoint: {
            symbol: 'pin',
            symbolSize: remToPx(2.5),
            label: {
              show: true, // 是否显示标签
              //formatter: '{b}', // 标签内容，{b} 表示数据名称
              color: '#000000', // 标签文字颜色
              fontSize: remToPx(0.7) // 标签文字大小
            },
            data: [
              { type: 'max', name: '最大体重' },
              { type: 'max', name: '最大身高', valueDim: 'x' }
            ]
          },
          //平均值
          markLine: {
            lineStyle: {
              type: 'solid',
              //color: '#fff'
            },
            label: {
              show: true,
              position: 'end',
              color: '#FF69B4', // 平均值数值颜色为白色
              fontSize: remToPx(0.8)
            },
            data: [
              { type: 'average', name: '平均体重' },
              { type: 'average', name: '平均身高', valueDim: 'x' }] // 标记平均身高
          }
        },
        {
          name: '男',
          type: 'scatter',
          symbolSize: remToPx(0.25),
          emphasis: {
            focus: 'series'
          },


          // prettier-ignore
          data: data1.value,
          markArea: {
            silent: true,
            itemStyle: {
              color: 'transparent',
              borderWidth: 1,
              borderType: 'dashed'
            },
          },
          //最大值标
          markPoint: {
            symbol: 'pin',
            symbolSize: remToPx(2.5),
            label: {
              show: true, // 是否显示标签
              //formatter: '{b}', // 标签内容，{b} 表示数据名称
              color: '#000000', // 标签文字颜色
              fontSize: remToPx(0.7) // 标签文字大小

            },
            data: [
              { type: 'max', name: '最大体重' },
              { type: 'max', name: '最大身高', valueDim: 'x' }
            ]
          },
          markLine: {
            lineStyle: {
              type: 'solid',
              //color: '#fff' // 平均值线颜色
            },
            label: {
              show: true,
              position: 'end',
              color: '#00BFFF', // 平均值数值颜色为白色
              fontSize: remToPx(0.8)
            },
            data: [{ type: 'average', name: '平均体重' },
            { type: 'average', name: '平均身高', valueDim: 'x' }]// 标记平均身高
          }
        }
      ]
    };
    option && rightCenterChartInstance.setOption(option);
  } catch (error) {
    console.log("右中散点图获取数据失败！")
  }
}


</script>

<style scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>